<template>
  <div class="layerFilter" :class="name">
    <Tabs class="two-text" @on-click="tabsClick">
      <TabPane label="普通查询" :disabled="!queryForm.items.length">
        <div class="jqQueryTerms">
          <Form ref="queryForm" :model="queryForm" :label-width="80" style="width: 300px">
            <FormItem
              v-for="(item, index) in queryForm.items"
              :key="index"
              :label="item.lable"
              :prop="'items.' + index + '.value'">
              <Row v-if="item.VtypeEnum == 'character_str'">
                <Input   v-model="item.value"  placeholder="请输入值"/>
              </Row>
              <Row v-if="item.VtypeEnum == 'character_enum'">
                <Select   v-model="item.value">
                  <Option v-for="opt in item.options" :value="opt.value" :key="opt.value">{{ opt.lable }}</Option>
                </Select>
              </Row>
              <Row v-if="item.VtypeEnum == 'numeric'">
                <Col span="11">
                  <Input number placeholder="请输入最小值" v-model="item.value" />
                </Col>
                <Col span="2" style="text-align: center">-</Col>
                <Col span="11">
                  <Input number  placeholder="请输入最大值" v-model="item.value2" />
                </Col>
              </Row>
            </FormItem>
            <FormItem>
              <Button  @click="handleSubmit('queryForm')">确定</Button>
              <Button @click="handleReset('queryForm')" style="margin-left: 8px">重置</Button>
            </FormItem>
          </Form>
        </div>
      </TabPane>
      <TabPane label="高级查询">
        <!--空间关系-->
        <div class="spaceRelatShip fl">
          <span>空间关系：</span>
          <Select v-model="spaceRSV" style="width: 70px;" size="small">
            <Option value="SPATIAL_REL_CONTAINS">包含</Option>
            <Option value="SPATIAL_REL_CROSSES">相交</Option>
          </Select>
        </div>
        <!--查询范围-->
        <div class="queryRange fl">
          <span>查询范围：</span>
          <Select @on-change="queryRangeChange" v-model="queryRangeV" size="small" style="width: 89px;float: left">
            <Option value="全市">全市</Option>
            <Option value="行政区划">行政区划</Option>
            <Option value="自定义范围">自定义范围</Option>
          </Select>
          <Select v-model="xian" @change="loadJiedao" v-show="showQuXian" style="width: 80px;" size="small">
            <Option value="全市">全市</Option>
            <Option v-for="item in xianList" :value="item.value" :key="item.value" style=" margin-left: 10px;">{{ item.label }}</Option>
          </Select>
          <Select v-model="jiedao" v-show="showQuXian" style="width: 80px" size="small">
            <option value="全部">全部</option>
            <Option v-for="item in jiedaoList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <div class="queryDraw" v-show="showDraw">
            <div class="queryLine" title="线选择" @click="queryLayerByGeo('POLYLINE')"></div>
            <div class="queryRectangle" title="框选择" @click="queryLayerByGeo('RECTANGLE')"></div>
            <div class="queryCircle" title="圈选择" @click="queryLayerByGeo('CIRCLE')"></div>
            <div class="queryPolygon" title="多边形选择" @click="queryLayerByGeo('POLYGON')"></div>
          </div>
        </div>
        <!--条件类型-->
        <div class="reltionType fl" >
          <span>关系类型：</span>
          <RadioGroup v-model="reltionTypeV">
            <Radio label="或者"></Radio>
            <Radio label="并且"></Radio>
          </RadioGroup>
        </div>
        <!--自动拼接-->
        <div class="splitPane">
          <div class="termDiv">
            <div class="terms">
              <table>
                <tbody>
                <tr>
                  <td>
                    <Select v-model="termObj.name" style="width:100px" size="small" @on-change="termNameChange">
                      <Option v-for="item in LayerData.IFileds" v-if="item.IsQuery" :value="item.Name" :key="item.Alias">{{ item.Alias }}</Option>
                    </Select>
                  </td>
                  <td>
                    <Select v-model="termObj.symbol" style="width: 70px" size="small">
                      <Option v-for="item in symbolList" :value="item.name" :key="item.name">{{ item.name }}</Option>
                    </Select>
                  </td>
                  <td>
                    <Input v-model="termObj.value" v-if="!isEnum" size="small" style="width: 100px"/>
                    <Select v-model="termObj.value" v-if="isEnum" style="width: 100px" size="small">
                      <Option v-for="item in enumList" :value="item.value" :key="item.lable">{{ item.lable }}</Option>
                    </Select>
                  </td>
                  <td>
                    <Button type="default" @click="addTerm" size="small">
                      添加
                    </Button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="termResult">
            <div v-for="(item,index) in termList" class="termResultItem" v-bind:key="index">
              <label v-if="index===0">{{ item.name }}{{ item.symbol }}{{ item.value }}</label>
              <label v-if="index>0">{{ reltionTypeV }}{{ item.name }}{{ item.symbol }}{{ item.value }}</label>
              <Button type="default" @click="deleteTerm(index)" size="small" style="float: right;margin-top: 2px">删除
              </Button>
            </div>
          </div>
        </div>
        <div class="btnDiv">
          <Button class="ScreeningBtn" type="default" @click="ok" size="default">确定</Button>
          <Button class="ScreeningBtn" type="default" @click="clear" size="default">清除</Button>
        </div>
      </TabPane>
    </Tabs>

  </div>
</template>
<script>
import Draw from "../JavaScript/DrawTools";
import Query from "../JavaScript/QueryTask";
import bus from "./Bus"
export default {
  //接受父组件的值
  props: {
    LayerData: {
      type: Object,
      required: true,
      default: {
        IFileds: [{}]
      }
    },
    mapId: {
      type: String,
      required: true,
      default: "mainMap"
    }
  },
  data() {
    return {
      name: "layerFilter",
      spaceRSV: "SPATIAL_REL_CONTAINS",
      xian: "全市",
      jiedao: "全部",
      index: "index",
      queryForm: {
        items: []
      },
      xianList: [
        {
          value: "上城区",
          label: "上城区"
        },
        {
          value: "下城区",
          label: "下城区"
        },
        {
          value: "西湖区",
          label: "西湖区"
        },
        {
          value: "拱墅区",
          label: "拱墅区"
        },
        {
          value: "江干区",
          label: "江干区"
        },
        {
          value: "滨江区",
          label: "滨江区"
        },
        {
          value: "富阳区",
          label: "富阳区"
        },
        {
          value: "萧山区",
          label: "萧山区"
        },
        {
          value: "余杭区",
          label: "余杭区"
        },
        {
          value: "临安区",
          label: "临安区"
        }
      ],
      jiedaoList: [],
      showQuXian: false,
      showDraw: false,
      queryRangeV: "全市",
      reltionTypeV: "或者",
      termObj: { name: "", symbol: "=", value: "" },
      JDtermObj: { name: "", symbol: "=", value: "" },
      termList: [],
      queryGeometry: null,
      isEnum: false,
      fieldList: [
        {
          label: "NAME"
        },
        {
          label: "DJ"
        },
        {
          label: "SZS"
        },
        {
          label: "LXDH"
        }
      ],
      symbolList: [
        {
          name: "="
        },
        {
          name: "<>"
        },
        {
          name: ">="
        },
        {
          name: "<="
        },
        {
          name: "<"
        },
        {
          name: "包含"
        },
        {
          name: "不包含"
        },
        {
          name: "为空"
        },
        {
          name: "不为空"
        }
      ],
      defaultSymbols: [
        {
          name: "="
        },
        {
          name: "<>"
        },
        {
          name: ">="
        },
        {
          name: "<="
        },
        {
          name: "<"
        },
        {
          name: "包含"
        },
        {
          name: "不包含"
        },
        {
          name: "为空"
        },
        {
          name: "不为空"
        }
      ],
      numberSymbols: [
        {
          name: "="
        },
        {
          name: "<>"
        },
        {
          name: ">="
        },
        {
          name: "<="
        },
        {
          name: "<"
        }
      ],
      textSymbols: [
        {
          name: "="
        },
        {
          name: "包含"
        },
        {
          name: "不包含"
        },
        {
          name: "为空"
        },
        {
          name: "不为空"
        }
      ],
      enumSymbols: [
        {
          name: "="
        }
      ],
      enumList: []
    };
  },
  mounted(){
    var m=this;
     bus.$on("clear-search", function(name) {
      if (name == "filter") {
        m.clear();
       // this.clearAll();
      }
    }.bind(this));
  },
  watch: {
    LayerData: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        // console.log("b.c: "+val.c, oldVal.c);但是这两个值打印出来却都是一样的
        if (val == oldVal) {
          return;
        }
        var list = val.IFileds;
        this.queryForm.items.length = 0;
        if (list) {
          for (var i = 0; i < list.length; i++) {
            if (list[i].IsQuery) {
              var obj = {
                value: "",
                lable: list[i].Alias,
                Name: list[i].Name,
                index: i + 1,
                VtypeEnum: list[i].VtypeEnum,
                value2: "",
                options: []
              };
              if (list[i].VtypeEnum == "character_enum") {
                obj.options = this.parseDom(list[i].QueryExtend);
              }
              this.queryForm.items.push(JSON.parse(JSON.stringify(obj)));
            }
          }
        }
      },
      deep: true
    }
  },
  /* updated:function(){
      var list = this.LayerData.IFileds;
      if(list){
        for (var i =0;i<list.length;i++){
          if(list[i].IsQuery){
            if(list[i].VtypeEnum == "numeric"){
              this.queryForm[list[i].Name] = {};
              this.queryForm[list[i].Name].small = null;
              this.queryForm[list[i].Name].bag = null;
            }else if(list[i].VtypeEnum == "character_str"){
              this.queryForm[list[i].Name] = "";
            }else if(list[i].VtypeEnum == "character_enum"){
              this.queryForm[list[i].Name] = "";
            }
          }
        }
      }
    },*/
  methods: {
    queryRangeChange: function(el) {
      if (this.showQuXian) {
        this.showQuXian = false;
      }
      if (this.showDraw) {
        this.showDraw = false;
      }
      if (el === "行政区划") {
        this.showQuXian = true;
      } else if (el === "自定义范围") {
        this.showDraw = true;
      }
      //默认赋值应该是全市范围
      this.geometry = null;
    },
    loadJiedao: function(option) {
      //当选中的值发生改变是  显示这个 并且高亮当前县
      debugger;
    },
    //线选
    queryLayerByGeo: function(type) {
      var self = this;
      Draw.initDraw(this.mapId, type, function(evt) {
        var data = self.LayerData;
        self.queryGeometry = evt.geometry;
        Query.query(data, evt.geometry, self.spaceRSV, self.mapId, null);
      });
    },
    addTerm: function() {
      if (this.termObj.name && this.termObj.name.trim() == "") {
        this.$Message.warning("请选择条件！");
        return;
      } else if (this.termObj.value && this.termObj.value.trim() == "") {
        this.$Message.warning("请填写值！");
        return;
      } else {
        for (var i = 0; i < this.termList.length; i++) {
          this.termObj.name = this.termObj.name.trim();
          this.termObj.value = this.termObj.value.trim();
          if (
            this.termObj.name == this.termList[i].name &&
            this.termObj.symbol == this.termList[i].symbol &&
            this.termObj.value == this.termList[i].value
          ) {
            this.$Message.warning("此条件已经存在！");
            return;
          }
        }
      }
      var objString = JSON.stringify(this.termObj);
      this.termList.push(JSON.parse(objString));
    },
    addTermJD: function() {
      debugger;
      if (this.JDtermObj.name && this.JDtermObj.name.trim() == "") {
        this.$Message.warning("请选择条件！");
        return;
      } else if (this.JDtermObj.value && this.JDtermObj.value.trim() == "") {
        this.$Message.warning("请填写值！");
        return;
      } else {
        for (var i = 0; i < this.termList.length; i++) {
          this.JDtermObj.name = this.JDtermObj.name.trim();
          this.JDtermObj.value = this.JDtermObj.value.trim();
          if (
            this.JDtermObj.name == this.termList[i].name &&
            this.JDtermObj.symbol == this.termList[i].symbol &&
            this.JDtermObj.value == this.termList[i].value
          ) {
            this.$Message.warning("此条件已经存在！");
            return;
          }
        }
      }
      var objString = JSON.stringify(this.JDtermObj);
      this.termList.push(JSON.parse(objString));
    },
    deleteTerm: function(index) {
      this.termList.splice(index, 1);
    },
    ok: function() {
      var relation = "";
      if (this.reltionTypeV == "或者") {
        relation = "or";
      } else {
        relation = "and";
      }
      var queryWhere = {
        queryFiled: this.termList,
        relation: relation
      };
      Query.query(
        this.LayerData,
        this.queryGeometry,
        this.spaceRSV,
        this.mapId,
        queryWhere
      );
    },
    /*okJD:function(){
        var relation = "or";
        var queryWhere={
          queryFiled:this.termList,
          relation:relation
        }
        Query.query(this.LayerData,null,null,this.mapId,queryWhere);
      },*/
    clear: function() {
      this.termList = [];
      Query.clearQuery(this.LayerData, this.mapId);
    },
    termNameChange: function(data) {
      var list = this.LayerData.IFileds;
      for (var i = 0; i < list.length; i++) {
        if (data === list[i].Name) {
          if (list[i].VtypeEnum == "numeric") {
            this.isEnum = false;
            this.symbolList = this.numberSymbols;
          } else if (list[i].VtypeEnum == "character_str") {
            this.isEnum = false;
            this.symbolList = this.textSymbols;
          } else if (list[i].VtypeEnum == "character_enum") {
            this.isEnum = true;
            this.symbolList = this.enumSymbols;
            var listQuery = this.parseDom(list[i].QueryExtend);
            this.enumList = listQuery;
          }
        }
      }
    },
    //将字符串string转换成真正的dom
    parseDom: function(domStr) {
      var list = [];
      if (domStr) {
        var QueryExtends = domStr.split("\n");
        for (var y = 0; y < QueryExtends.length; y++) {
          var objE = document.createElement("div");
          objE.innerHTML = QueryExtends[y];
          var dom = objE.childNodes[0];
          var enumObj = { lable: "", value: "" };
          enumObj.lable = dom.innerText;
          enumObj.value = dom.getAttribute("data-value");
          list.push(JSON.parse(JSON.stringify(enumObj)));
        }
      }
      return list;
    },
    tabsClick: function() {
      this.clear();
      this.queryGeometry = null;
      this.symbolList = this.defaultSymbols;
      this.handleReset("queryForm");
    },
    handleSubmit(name) {
      var newArray = this.queryForm.items;
      var queryWhere = "";
      var value=[];
      for (var i = 0; i < newArray.length; i++) {
         if (newArray[i].value)
         value.push(newArray[i]);
      }
      for (var i = 0; i < value.length; i++) {
        if (value[i].value || value[i].value2) {
          if (i < value.length - 1) {
            if (value[i].value && value[i].value2) {
              queryWhere +=
                value[i].Name +
                " > " +
                value[i].value +
                " and " +
                value[i].Name +
                " < " +
                value[i].value2 +
                " and ";
            } else {
              queryWhere += value[i].Name + " like '%" + value[i].value + "%' and ";
            }
          } else {
            if (value[i].value && value[i].value2) {
              queryWhere +=
                value[i].Name +
                " > " +
                value[i].value +
                " and " +
                value[i].Name +
                " < " +
                value[i].value2;
            } else {
              queryWhere += value[i].Name + " like '%" + value[i].value+"%'";
            }
          }
        }
      }
    
      Query.queryByNormal(this.LayerData, this.mapId, queryWhere);
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>
<style lang="less">
.spaceRelatShip {
  width: 300px;
  height: 35px;
  text-align: left;
  > span {
    float: left;
  }
}

.queryRange {
  width: 350px;
  height: 35px;
  > span {
    float: left;
  }
  .queryDraw {
    float: left;
    > div {
      display: block;
      border: 1px solid white;
      float: left;
      height: 26px;
      width: 26px;
    }
    .queryLine {
      background: url("../images/layerFilter/line.png") no-repeat center;
    }
    .queryRectangle {
      background: url("../images/layerFilter/rectangle.png") no-repeat center;
    }
    .queryCircle {
      background: url("../images/layerFilter/circle.png") no-repeat center;
    }
    .queryPolygon {
      background: url("../images/layerFilter/polygon.png") no-repeat center;
    }
  }
}
.reltionType{
  margin-bottom: 6px;
}
.splitPane {
  width: 360px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #d3d3d3;
  margin-top: 5px;
  .termDiv {
    width: 100%;
    height: 70px;
    overflow: hidden;
    border-bottom: 1px solid #d3d3d3;
    background-color: #ececec;
    .terms {
      width: 100%;
      height: 50px;
      padding-top: 20px;
      padding-left: 9px;
      display: block;
    }
  }
}

.termResult {
  width: 100%;
  height: 130px;
  overflow-x: hidden;
  overflow-y: auto;
  .termResultItem {
    height: 30px;
    border-bottom: 1px solid #666666;
    line-height: 25px;
  }
}

.btnDiv {
  width: 100%;
  height: 35px;
  margin-top: 10px;
  .ScreeningBtn {
    position: relative;
    text-align: center;
    margin-left: 10px;
  }
}
.jqQueryTerms {
  height: 340px;
  overflow: auto;
}
.jqQueryTerms .ivu-form-item {
  margin-bottom:13px !important
}
@name: layerFilter;
.@{name} {
  margin-top: -10px;
  .ivu-tabs-nav-scroll {
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
</style>
